<template>
  <v-edit-title :element="element" :index="index" :total="total">
    <div ref="tableContainer" class="c-table-container">
      <div class="c-table-list">
        <div class="c-table-row__title"></div>
        <div
          v-for="(colItem, colIndex) in element.content.column"
          :key="colIndex"
          class="c-table-column__list"
        >
          <div class="c-table-column-header">
            <a-icon
              type="close"
              class="red editable-cell-icon"
              @click="removeColumn(colIndex)"
            />
            <v-edit-span v-model="colItem.header" />
            <a-icon
              type="edit"
              class="editable-cell-icon"
              @click="editColumn(colIndex)"
            />
          </div>
        </div>
      </div>
      <div
        v-for="(rowItem, rowIndex) in rowList"
        :key="rowIndex"
        class="c-table-list"
      >
        <div :ref="`row_${rowIndex}`" class="c-table-row__title">
          <editable-cell
            :text="rowItem"
            @change="onCellChange(rowIndex, $event)"
            @remove="onCellRemove(rowIndex, $event)"
          />
        </div>
        <div
          v-for="(colItem, colIndex) in element.content.column"
          :key="colIndex"
          class="c-table-column__list"
        >
          <a-select
            :ref="`selectList_${rowIndex}_${colIndex}`"
            label-in-value
            :dropdown-match-select-width="false"
            @change="handleChange"
          >
            <a-select-option
              v-for="(item, index) in colItem.choices"
              :key="index"
              :value="`${rowIndex}_${colIndex}_${index}`"
            >
              {{ item.content }}
            </a-select-option>
          </a-select>
        </div>
      </div>
    </div>
    <div class="c-buttons">
      <a-button @click="addRow">添加一行</a-button>
      <a-button @click="addColumn">添加一列</a-button>
    </div>
    <a-modal v-model="visible" title="编辑表格下拉框" @ok="handleOk">
      <p v-for="(item, index) in selectList" :key="index">
        <editable-cell
          :text="item.content"
          :if-can-edit="item.ifCanEdit"
          @change="onModalCellChange(index, $event)"
          @remove="onModalCellRemove(index)"
        />
      </p>
      <p><a-button @click="addModal">添加一行</a-button></p>
    </a-modal>
  </v-edit-title>
</template>
<script>
export default {
  props: {
    element: {
      type: Object,
      default() {
        return {
          title: '',
          content: [],
          id: -1,
        }
      },
    },
    index: Number,
    total: Number,
  },
  data() {
    return {
      activeEditColIndex: -1,
      header: '',
      visible: false,
      selectList: [],
    }
  },
  computed: {
    options() {
      const list = []
      this.rowList.forEach((item, index) => {
        const obj = {
          row: item,
          column: [],
        }
        list[index] = obj
      })
      return list
    },

    rowList() {
      console.log('result', this.result)
      const list = this.element.content.row || []
      return list
    },
  },
  created() {
    console.log('content', this.element.content)
    this.header = this.title
  },
  methods: {
    onModalCellChange(index, value) {
      this.selectList[index].content = value
      console.log(this.selectList)
      this.element.content.column[this.activeEditColIndex].choices = JSON.parse(
        JSON.stringify(this.selectList)
      )
    },
    onModalCellRemove(index) {
      this.selectList.splice(index, 1)
      this.element.content.column[this.activeEditColIndex].choices = JSON.parse(
        JSON.stringify(this.selectList)
      )
    },
    addModal() {
      this.selectList.push({
        ifCanEdit: true,
        content: '',
        index: this.selectList.length + 1,
      })
    },
    handleOk() {
      this.visible = false
    },
    showModal() {
      this.visible = true
    },
    addRow() {
      this.element.content.row.push('行标题')
    },
    addColumn() {
      const id = this.element.content.column.length + 1
      this.element.content.column.push({
        header: '点击编辑列',
        columnId: id,
        choices: [],
      })
    },
    editColumn(colIndex) {
      const colItem = this.element.content.column[colIndex]
      this.selectList =
        colItem.choices.length > 0 ?
          colItem.choices :
          [
            {
              ifCanEdit: true,
              content: '',
              index: 1,
            },
          ]
      console.log('index', colIndex, colItem)
      this.activeEditColIndex = colIndex
      this.showModal()
    },
    removeColumn(colIndex) {
      this.element.content.column.splice(colIndex, 1)
      this.submit()
    },
    onCellChange(rowIndex, e) {
      console.log(rowIndex, e)
      this.element.content.row.splice(rowIndex, 1, e)
    },
    onCellRemove(rowIndex) {
      this.element.content.row.splice(rowIndex, 1)
    },
    handleChange(item) {
      console.info('item:', item)
      const [rowIndex, colIndex, choiceIndex] = item.key.split('_')
      const columnList = this.element.content.column
      const column = columnList[colIndex]
      const choice = column.choices[choiceIndex]
      this.options[rowIndex].column[colIndex] = {
        title: column.header,
        choiceContent: choice.content,
      }
      this.submit()
    },
    submit() {
      this.$emit('complete', this.element.content)
    },
  },
}
</script>
<style scoped lang="less">
.c-buttons {
  width: 200px;
  height: 60px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.c-table-body {
  position: relative;
  .c-table-title-list {
    background: #fff;
    position: absolute;
    z-index: 1;
    left: 0;
    width: 80px;
    height: 100%;
    .c-table-row__title {
      height: 32px;
      line-height: 32px;
      margin-bottom: 20px;
      word-break: break-word;
      margin-right: 24px;
      text-align: right;
    }
  }
}
.c-table-container {
  overflow-x: scroll;
  font-size: 14px;
  color: #333;
}
.c-table-list {
  display: flex;
  flex-direction: row;
  align-items: center;
  margin-bottom: 20px;
  position: relative;
  margin-left: 120px;
  .c-table-column-header {
    word-break: break-word;
  }
  .c-table-column__list {
    width: 132px;
    display: flex;
    flex-direction: column;
    margin-right: 18px;
    & > div {
      width: 132px;
    }
  }
  .c-table-row__title {
    z-index: 1;
    word-break: break-word;
    position: absolute;
    left: -120px;
    width: 120px;
    margin-right: 24px;
    // text-align: right;
  }
}
.c-table-container::-webkit-scrollbar {
  /*滚动条整体样式*/
  width: 10px;
  /*高宽分别对应横竖滚动条的尺寸*/
  height: 6px;
}

.c-table-container::-webkit-scrollbar-thumb {
  /*滚动条里面小方块*/
  border-radius: 10px;
  background: #999;
}

.c-table-container::-webkit-scrollbar-track {
  /*滚动条里面轨道*/
  background-color: #fff;
}
.red {
  color: red;
}
</style>
